<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
		body,input,div {
            margin:0;
            padding:0;
        }
		div {
            width:300px;
            margin:10px auto;
            padding:30px;
            background:black;
            text-align:center;
        }
		input {
            outline:none;
            width:35px;
            height:20px;
            border:2px solid grey;
            margin:0 10px;
            line-height:20px;
            text-align:center;
        }
		div span {
            color:white;
        }
	</style>
</head>
<body>
    <div>
		<input type="text" maxlength="2" readonly="readonly"><span>点</span>
		<input type="text" maxlength="2" readonly="readonly"><span>分</span>
		<input type="text" maxlength="2" readonly="readonly"><span>秒</span>
	</div>
</body>
</html>
<script>	
    var oInput = document.getElementsByTagName("input");
    var myDate = new Date();
    /*此处仿照页面刷新，最好不要这么用*/
    setInterval(onload,1000);
    time();
    function time() {
        oInput[0].value = myDate.getHours();
        oInput[1].value = myDate.getMinutes();
        myDate.getSeconds() < 10 ? (oInput[2].value="0"+myDate.getSeconds()) : oInput[2].value = myDate.getSeconds();
    }
	
    var oInput = document.getElementsByTagName("input");
    /*time函数功能，获取当前时间和时间存储，故，需要将new Date()放在函数里面*/
    setInterval(time,1000);
    time();
    function time() {
        var myDate = new Date();
        oInput[0].value = myDate.getHours();
        oInput[1].value = myDate.getMinutes();
        myDate.getSeconds() < 10 ? (oInput[2].value="0"+myDate.getSeconds()) : oInput[2].value = myDate.getSeconds();
    }
</script>